<template>
  <div>
    <!--
    买入批次<el-date-picker
          style="width: 120px; margin-right:30px; margin-left:10px"
            v-model="searchData.buy_num.value"
            value-format="YYYY-MM"
            type="month"
            placeholder="买入批次"
            :default-value="new Date(2024, 1, 1)"
          />
      </div>

        母牛品种<el-select v-model="searchData.sort.value" placeholder="母牛品种" style="width: 120px; margin-right:30px; margin-left:10px">
          <el-option label="西门塔尔牛" value="西门塔尔牛"/>
          <el-option label="鲁西黄牛" value="鲁西黄牛"/>
          <el-option label="夏洛莱牛" value="夏洛莱牛"/>
        </el-select>
     -->
    <div class="search-line">



      项目名称<el-select v-model="searchData.projId.value" placeholder="项目名称" style="width: 120px; margin-right:30px; margin-left:10px">
        <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.projName"
              :value="item.id"

            />
      </el-select>




      <el-button type="primary" @click="loadData()">查询</el-button>
      <el-button type="warning" @click="clearnSearch()">重置</el-button>
<!--
      <el-button type="success"   @click="addDialog = true" v-show="isAdmin">添加</el-button> -->
    </div>

    <div class="border w-full">
      <el-table :data="tableData.records">
        <!---------------------表单数据------------------------------->

        <el-table-column prop="project.projName" label="项目" width="100"/>
        <el-table-column prop="user.userName" label="项目负责人" width="100"/>
        <el-table-column prop="description" label="进度描述" width="400"/>
        <el-table-column prop="percentage" label="百分比" width="100"/>

        <el-table-column prop="createTime" label="创建时间" width="250"/>
        <!---------------------表单数据------------------------------->
<!--        <el-table-column label="操作">-->
<!--          <template #default="scope">-->
<!--            <el-button size="small" @click="openDetail(scope.row.id)">详情</el-button>-->
<!--            <el-button size="small" @click="openEdit(scope.row.id)" v-show="isAdmin">修改</el-button>-->
<!--            <el-button size="small" @click="deleted(scope.row.id)" type="danger" v-show="isAdmin">删除</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </div>
    <el-pagination
        style="margin-bottom: 20px"
        background
        layout="prev, pager, next"
        :page-count="tableData.pages"
        v-model:current-page="tableData.page"
        @update:current-page="loadData"
    />
    <!--------------------------------组件------------------>



    <!------------------详情弹窗--------------------------------->
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-model="detailDialog"
        title="详情"
        width="30%"
        :before-close="resetForm"
    >
      <div>
        <div>
          项目id : {{ form.projId }}
        </div>
        <div>
          进度描述 : {{ form.description }}
        </div>
        <div>
          百分比 : {{ form.percentage }}
        </div>
        <div>
          上传user : {{ form.createUser }}
        </div>
        <div>
          创建时间 : {{ form.createTime }}
        </div>
      </div>
      <el-button @click="resetForm">关闭</el-button>
    </el-dialog>

    <!------------------新增弹窗--------------------------------->
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-model="addDialog"
        title="新增"
        width="30%"
        :before-close="resetForm"
    >
      <!--数据开始---->
      <el-form :model="form" label-width="120px">
        <el-form-item label="项目id">
          <el-input v-model="form.projId"/>
        </el-form-item>
        <el-form-item label="进度描述">
          <el-input v-model="form.description"/>
        </el-form-item>
        <el-form-item label="百分比">
          <el-input v-model="form.percentage"/>
        </el-form-item>
        <el-form-item label="上传user">
          <el-input v-model="form.createUser"/>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form.createTime"/>
        </el-form-item>
        <!--数据截止---->
        <el-form-item>
          <el-button type="primary" @click="add">添加</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!------------------编辑弹窗--------------------------------->
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-model="editDialog"
        title="编辑"
        width="30%"
        :before-close="resetForm"
    >
      <!--数据开始---->
      <el-form :model="form" label-width="120px">
        <el-form-item label="项目id">
          <el-input v-model="form.projId"/>
        </el-form-item>
        <el-form-item label="进度描述">
          <el-input v-model="form.description"/>
        </el-form-item>
        <el-form-item label="百分比">
          <el-input v-model="form.percentage"/>
        </el-form-item>
        <el-form-item label="上传user">
          <el-input v-model="form.createUser"/>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form.createTime"/>
        </el-form-item>
        <!--数据截止---->
        <el-form-item>
          <el-button type="primary" @click="edit">修改</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script setup>
import {ElMessage, ElMessageBox} from "element-plus";
import {onMounted, reactive, ref} from "vue";
import ImgsUpload from "@/components/img/imgsUpload/index.vue"
import ImgsShow from "@/components/img/imgShow/index.vue"
import {
  getProgressPage,
  updateProgress,
  deletedProgress,
  addProgress,
  getProgressById
} from "@/api/progress";


import {
  getProjectPage,
  updateProject,
  getProjectList,
  deletedProject,
  addProject,
  getProjectById
} from "@/api/project";

import {useUserStore} from "@/stores/userStores";
const projectList = ref([]);
const tableData = reactive({
  records: [],
  orderBy: '',
  pages: 0,
  page: 1,
  size: 10,
  query: {}
});
const form = ref({
  id: '', //项目进度表id
  projId: '', //项目id
  description: '', //进度描述
  percentage: '', //百分比
  createUser: '', //上传user
  createTime: '', //创建时间
});
//------------选择框------------------------
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },

];

//------------基本常量------------------------
const userStore = useUserStore();
const token = userStore.token;
const isAdmin = ref(false);
const detailDialog = ref(false);
const editDialog = ref(false);
const addDialog = ref(false);

// --------图片相关----------
const imgList = ref([])
const changeImgList = (array) => {
  imgList.value = array;
  form.value.pictures = JSON.stringify(array);
}

const dealImgJson = () => {
  // 图片处理
  console.log("拿到的图片值", form.value.pictures)
  if ('' != form.value.pictures && null != form.value.pictures) {
    imgList.value = JSON.parse(form.value.pictures.replace(/[\\]/g, ''));
  }
}

// ------------------- 搜索操作 ------------------------

const searchData = ref({
  //项目进度表id
  id: {
    key: 'id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //项目id
  projId: {
    key: 'proj_id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //进度描述
  description: {
    key: 'description',
    sqlKeyword: 'EQ',
    value: ''
  },
  //百分比
  percentage: {
    key: 'percentage',
    sqlKeyword: 'EQ',
    value: ''
  },
  //上传user
  createUser: {
    key: 'createUser',
    sqlKeyword: 'EQ',
    value: ''
  },
  //创建时间
  createTime: {
    key: 'createTime',
    sqlKeyword: 'EQ',
    value: ''
  },

});

function clearnSearch() {
  searchData.value.id.value = '';
  searchData.value.projId.value = '';
  searchData.value.description.value = '';
  searchData.value.percentage.value = '';
  searchData.value.createUser.value = '';
  searchData.value.createTime.value = '';
  loadData();

}


/**
 * 查看详情
 * */
const openDetail = async (id) => {
  const res = await getProgressById(id);
  form.value = res.data;
  // 图片处理
  dealImgJson();
  detailDialog.value = true;
}

/**
 * 打开编辑按钮
 */
const openEdit = async (id) => {
  const res = await getProgressById(id);
  form.value = res.data;
  // 图片处理
  dealImgJson();
  editDialog.value = true;
};

/**
 *修改
 */
const edit = async () => {
  const res = await updateProgress(form.value);
  ElMessage.success("修改成功");
  editDialog.value = false;
  loadData();
  resetForm();
};

/**
 *添加
 */
const add = async () => {
  const res = await addProgress(form.value);
  ElMessage.success("添加成功");
  addDialog.value = false;
  loadData();
  resetForm();
};

/**
 * 删除数据
 */
const deleted = async (id) => {
  ElMessageBox.confirm("是否确认删除？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await deletedProgress({id});
    ElMessage.success("success");
    loadData();
  });
};

/**
 * 重置表单
 */
const resetForm = () => {
  if (addDialog.value) {
    addDialog.value = false;
  }
  if (editDialog.value) {
    editDialog.value = false;
  }
  if (detailDialog.value) {
    detailDialog.value = false;
  }
  form.value = {};
  // 图片处理
  imgList.value = [];
};

const loadData = async () => {
  tableData.query = searchData.value;
  const res = await getProgressPage(tableData);
  tableData.records = res.data.list;
  tableData.page = res.data.page;
  tableData.pages = res.data.pages;
};

const loadlProjectList = async () =>{
  const res = await getProjectList();
  projectList.value =res.data;
}
onMounted(() => {
  // 初始加载分页数据
  loadData(tableData);
  isAdmin.value =userStore.getIsAdmin();
  console.log("isAdmin{}",isAdmin.value)
  loadlProjectList();

});
</script>

<style scoped>

.search-line {
  display: flex;
  margin-bottom: 10px;
  text-align: center;
  line-height: 35px;
}

</style>

